<template>
	<xn-form-container title="垫付详情" width="80%" :visible="visible" :destroy-on-close="true" @close="onclose">
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
			:scroll="{ x: 'max-content'}"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="formRef.onOpen(searchFormState.id)"
							  v-if="hasPerm('advancePqqaymentsAdd')">
						<template #icon>
							<plus-outlined/>
						</template>
						新增
					</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="formRef.onOpen(record.gzxMonthlyGoalsId, record)"
						   v-if="hasPerm('adv1ancePaymentsEdit')">编辑</a>
						<a-divider type="vertical"
								   v-if="hasPerm(['advancePaymentsEdit', 'advancePayme1ntsDelete'], 'and')"/>
						<a-popconfirm title="确定要删除吗？" @confirm="deleteAdvancePayments(record)">
							<a-button type="link" danger size="small" v-if="hasPerm('advancePaymentsD1elete')">删除
							</a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</s-table>
		<AdvanceForm ref="formRef" @successful="table.refresh(true)"/>
		<Upload ref="upload" @successful="table.refresh(true)"/>
	</xn-form-container>
</template>

<script setup name="detailList">
import monthlyApi from '@/api/bi/goals/monthly/monthlyApi'
import BigNumber from "bignumber.js";


const table = ref()
const upload = ref()
const formRef = ref()
const toolConfig = {refresh: true, height: true, columnSetting: true, striped: false}
const visible = ref(false)
const emit = defineEmits({successful: null})
const formatter = new Intl.NumberFormat('zh-CN');
const formatNumber = (num) => formatter.format(num.toNumber());
const onclose = () => {
	visible.value = false
	emit('successful')
}
const selectedRowKeys = ref([])
const formatPercentage = (num) => `${(num * 100).toFixed(2)}%`;
// 列表选择配置
const options = {
	// columns数字类型字段加入 needTotal: true 可以勾选自动算账
	alert: {
		show: true,
		clear: () => {
			selectedRowKeys.value = ref([])
		}
	},
	rowSelection: {
		onChange: (selectedRowKey, selectedRows) => {
			selectedRowKeys.value = selectedRowKey
		}
	}
}

const columns = [
	{
		title: '登记日期',
		dataIndex: 'registrationDate'
	},
	{
		title: '所在职场',
		dataIndex: 'deptName'
	},
	{
		title: '客户ID',
		dataIndex: 'clientId'
	},
	{
		title: '欠款人姓名',
		dataIndex: 'debtorName'
	},
	{
		title: '欠款金额',
		dataIndex: 'unpaidAmount',
		customRender: ({text}) => formatNumber(new BigNumber(text))
	},
	{
		title: '减免金额',
		dataIndex: 'discountAmount',
		customRender: ({text}) => formatNumber(new BigNumber(text))
	},
	{
		title: '甲方需还金额',
		dataIndex: 'needRepaymentAmount',
		customRender: ({text}) => formatNumber(new BigNumber(text))
	},
	{
		title: '实还金额',
		dataIndex: 'amountReturned',
		customRender: ({text}) => formatNumber(new BigNumber(text))
	},
	{
		title: '垫付金额',
		dataIndex: 'advancedPaymentAmount',
		customRender: ({text}) => formatNumber(new BigNumber(text)),
		customCell: (record, index) => {
			return {
				style: {
					background: record.isTotal ? '#f0f0f0' : undefined,
					color: '#FF0000'
				}
			}
		}
	},
	{
		title: '员工账号',
		dataIndex: 'employeeAccount'
	},
	{
		title: '操作员工',
		dataIndex: 'operatingEmployee'
	},
	{
		title: '总佣金',
		dataIndex: 'totalCommissionEstimate',
		customRender: ({text}) => formatNumber(new BigNumber(text))
	},
	{
		title: '实际佣金',
		dataIndex: 'actualCommissionEstimate',
		customRender: ({text}) => formatNumber(new BigNumber(text)),
		customCell: (record, index) => {
			return {
				style: {
					background: record.isTotal ? '#f0f0f0' : undefined,
					color: '#FF0000'
				}
			}
		}
	},
	{
		title: '垫付比例',
		dataIndex: 'advancePaymentRatio'
	},
	{
		title: '佣金比例',
		dataIndex: 'commissionRatio'
	},
	{
		title: '账龄',
		dataIndex: 'accountAge'
	},
	{
		title: '项目',
		dataIndex: 'projectName'
	},
	{
		title: '批次',
		dataIndex: 'batch'
	}
]
const searchFormState = reactive({
	id: undefined
})
// 操作栏通过权限判断是否显示
if (hasPerm(['advancePaymen1tsEdit', 'advancePayments1Delete'])) {
	columns.push({
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		width: '150px'
	})
}
// 打开抽屉
const onOpen = (record) => {
	visible.value = true
	searchFormState.id = record.id
	console.log(searchFormState)
}
const loadData = (parameter) => {
	const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
	return monthlyApi.advancePaymentsPage(Object.assign(parameter, searchFormParam)).then((data) => {
		for (let i = 0; i < data.records.length; i++) {
			data.records[i].advancePaymentRatio = formatPercentage(data.records[i].advancePaymentRatio)
			data.records[i].commissionRatio = formatPercentage(data.records[i].commissionRatio)
		}
		return data
	})
}
// 重置
const reset = () => {
	searchFormRef.value.resetFields()
	table.value.refresh(true)
}
// 删除
const deleteAdvancePayments = (record) => {
	let params = [
		{
			id: record.id
		}
	]
	monthlyApi.advancePaymentsDelete(params).then(() => {
		table.value.refresh(true)
	})
}
// 批量删除
const deleteBatchAdvancePayments = (params) => {
	monthlyApi.advancePaymentsDelete(params).then(() => {
		table.value.clearRefreshSelected()
	})
}

// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
	onOpen
})
</script>

<style scoped></style>
